<template>
<div>
  <!--  返回-->
  <van-nav-bar
      title="密码重置"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />
<!--  logo-->
  <div class="logo">
    <img src="../assets/images/logo2.png" alt="">
  </div>
<!--  重置密码-->
  <div class="forgetPassword">
    <van-field v-model="tel" label="手机号" type="tel"/>
    <van-field v-model="password1" label="输入新密码" type="password"/>
    <van-field v-model="password2" label="确认新密码" type="password"/>
    <van-field
        v-model="code"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
    >
      <template #button>
        <van-button :disabled="isDisabled" size="small" type="primary" @click="postCode">发送验证码</van-button>
      </template>
    </van-field>
    <van-button block round type="info" @click="register">点击重置密码</van-button>
  </div>

</div>
</template>

<script>
import {phoneCade,forgotPassword} from '../api/api'
import { Toast } from 'vant';
export default {
  name: "ForgetPasswd",
  data(){
    return {
      tel:'',
      password1:'',
      password2:'',
      code:'',
      isDisabled:false,
    }
  },
  methods: {
    //返回上一页面
    onClickLeft(){
      window.history.go(-1)
    },
    //发送验证码
    postCode(){
      if(/^1[3456789]\d{9}$/.test(this.tel)){
        this.isDisabled = true;
        setTimeout(() => {
          this.isDisabled = false;
        }, 60000)
        phoneCade(this.tel).then(res=>{
          if(res.code=='0'){
            Toast('验证码已发送，请注意查收');
          }
        })
      }else{
        Toast.fail('请输入正确手机号！');
      }

    },
  //  重置密码
    register(){
      if(this.password1===this.password2 && this.tel != "" && this.code != ""){
        forgotPassword(this.tel,this.code,this.tel,this.password1).then(res=>{
          console.log(res)
          if(res.code=="0"){
            Toast.success('密码修改成功，快去登陆吧！');
            setTimeout(()=>this.$router.push('/login'),1500)
          }else{
            Toast.fail('密码修改不成功，请稍后重试！');
          }
        })
      }else if(!this.password1==this.password2 ){
        Toast.fail('两次密码不一致！');
      }else if(this.tel == "" && this.code == ""){
        Toast.fail('请输入手机号和验证码！');
      }

    },
  },
}
</script>

<style scoped lang="less">
.forgetPassword {
  width: 90%;
  margin: 20px auto 0;
}
//label
/deep/ .van-field__label {
  color: black;
  width: 5em;
}
//logo
.logo {
  margin-top: 60px;
  img {
    width: 100%;
  }
}
</style>